/**
 * 模板市场
 */
import request from "@/utils/request";
import React, { useCallback, useEffect, useState } from "react";
import { useHistory } from "umi";
// import { useRouteMatch } from "react-router";
// import { h} from 'umi';

import style from '../index.less';

function getTemplates() {
  return request('/api/template/list?page=1&pageSize=10', {

  })
}

function useTemplateMarket() {
  const [templates, setTemplates] = useState<Array<any>>([])
  const history = useHistory()

  useEffect(() => {
    getTemplates().then(rs => {
      setTemplates(rs.data.list)
    })
  }, [])


  const handleToEditor = useCallback((tplId: number) => {
    history.push(`/store/furnish/${tplId}/1`)
  }, [])

  return {
    templates,
    handleToEditor
  }
}
export function TemplateMarket() {

  const { templates, handleToEditor } = useTemplateMarket()

  return (
    <ul className={style['module_ul']}>
      {templates.map(tx => (
        <li className={style['module_li']} key={tx.title} onClick={() => handleToEditor(tx.id)}>
          <img src={tx.thumbnail} />
          <div className={style['module_name']}>{tx.title}</div>
        </li>
      ))}
    </ul>
  )
}